<template>
	<view class="min-h-[100vh] jfmx-bg" :style="themeColor()">
    <view>
      <view class="flex justify-between items-center b-[#2F2F2F] px-[20rpx] text-[#fff] text-[28rpx] pt-[80rpx]">
        <image src="@/image/qiandao/return.png" style="width: 50rpx;height: 50rpx;margin-right: 20rpx;z-index: 3;" @click="returnPage"/>
        <text class="text-[32rpx] font-bold">积分明细</text>
        <view class="flex items-center bg-[#fff] text-[#B13F3F] p-[10rpx] pl-[20rpx]" @click="handleSelect">
          <view class="text-[26rpx] mr-[10rpx]">筛选日期</view>
<!--          <view class="nc-iconfont nc-icon-riliV6xx !text-[28rpx] leading-[36rpx]"></view>-->
        </view>
      </view>
      <view class="mt-[120rpx] ml-[80rpx] text-[#5E0000]">
        <view>可用积分</view>
        <view class="text-[55rpx]">{{345}}</view>
      </view>
      <u-popup :show="typePopup" mode="top" @close="typePopup = false" class="type-class">
        <view @touchmove.prevent.stop class="py-[22rpx]">
          <view class="leading-[80rpx] text-[26rpx] text-[#333] px-[50rpx]" :class="{'bg-[#FDF8F8] !text-primary font-500' : from_type == ''}" @click="searchTypeFn()">全部</view>
          <view class="leading-[80rpx] text-[26rpx] text-[#333] px-[50rpx]" :class="{'bg-[#FDF8F8] !text-primary font-500' : from_type == index}" v-for="(item,index) in pointType" @click="searchTypeFn(index,item)">{{ item.name }}</view>
        </view>
      </u-popup>
    </view>
        <view class="">
            <view class="px-[var(--sidebar-m)] pt-[100rpx] pb-[20rpx] flex items-center justify-between w-[100%]">
                <view class="flex items-center flex-1">
                    <view class="px-[20rpx] py-[6rpx] rounded-[30rpx] text-center text-[30rpx] leading-[36rpx] mr-[20rpx] text-[#999999] flex-1 relative" :class="{'!text-[#B13F3F] font-500 bottom-sle':amount_type == item.status}" v-for="(item,index) in typeList" :key="index" @click="loadTypeFn(item.status)">{{ item.name }}</view>
                </view>
            </view>
        </view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getPointListFn" top="">
			<view v-for="(item,index) in pointList" :key="index" class="sidebar-marign">
				<view v-show="item.flag">
                    <block v-for="(subItem,subIndex) in item.month_data" :key="subItem.id">
                        <view class="flex items-center ">
                            <view class="flex-1  flex items-center ml-[20rpx]  box-border py-[20rpx] border-0" :class="{'border-solid border-t-[2rpx]  border-[#444444]' : subIndex}">
                                <view class="flex-1">
                                    <view class="text-[28rpx] font-500 leading-[36rpx] text-[#fff]">{{subItem.from_type_name}}</view>
                                    <view class="text-[24rpx] text-[#999999] leading-[34rpx] mt-[4rpx]">{{subItem.create_time}}</view>
                                </view>
                                <view class="text-[36rpx] font-500 text-[#03B521]" :class="{ '!text-primary' : subItem.account_data > 0 }">{{subItem.account_data > 0 ? '+' + subItem.account_data : subItem.account_data}}</view>
                            </view>
                        </view>
                    </block>
                </view>
			</view>
            <view class="mx-[30rpx]  rounded-[16rpx] noData flex items-center justify-center" v-if="!pointList.length && loading">
				<mescroll-empty  :option="{tip : '暂无积分明细'}"></mescroll-empty>
			</view>
		</mescroll-body>
        <!-- 时间选择 -->
         <select-date ref="selectDateRef" @confirm="confirmFn" />
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { t } from '@/locale'
import { redirect, img } from '@/utils/common';
import { getPointList, getPointType } from '@/app/api/member';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import selectDate from '@/components/select-date/select-date.vue';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const from_type = ref('');
const from_type_name = ref('')
const amount_type = ref('all');
const create_time = ref([])
const pointList = ref<Array<any>>([]);
const mescrollRef = ref(null);
const loading = ref<boolean>(false);
const typeList = ref([
    {name:'全部',status:'all'},
    {name:'收入',status:'income'},
    {name:'支出',status:'disburse'}
])

const getPointListFn = (mescroll)=> {
    let data = {
        page: mescroll.num,
        page_size: mescroll.size,
        from_type:from_type.value,
        amount_type:amount_type.value,
        create_time: create_time.value
    };
    loading.value = false;
    getPointList(data).then((res) => {
        let newArr = res.data.data;
        mescroll.endSuccess(newArr.length);
        //设置列表数据
        if (mescroll.num == 1) {
            pointList.value = []; //如果是第一页需手动制空列表
        }
        pointList.value = pointList.value.concat(newArr);
        pointList.value = pointList.value.map(item =>{
            item.flag = true
            return item
        })
        loading.value = true;
    }).catch(() => {
        loading.value = true;
        mescroll.endErr(); // 请求失败, 结束加载
    })
}

const pointType = ref({})
const getPointTypeFn = () =>{
    getPointType('point').then(res =>{
        pointType.value = res.data
    })
}
getPointTypeFn()
// 关键词搜索条件搜索
const typePopup = ref(false)
const searchTypeFn = (index:string = '',item:any = {}) =>{
    from_type.value = index
    from_type_name.value = item.name
    typePopup.value = false
    pointList.value = [];
    getMescroll().resetUpScroll();
}
// 类型搜索
const loadTypeFn = (type:string) =>{
    amount_type.value = type;
    pointList.value = [];
    getMescroll().resetUpScroll();
}

//日期筛选
const selectDateRef = ref()
const handleSelect = () =>{
    selectDateRef.value.show = true
}
// 确定时间筛选
const confirmFn = (data:any) =>{
    create_time.value = data;
    pointList.value = []
    getMescroll().resetUpScroll();
}

const returnPage = () =>{
  uni.navigateBack({
    delta: 1
  })
}
</script>

<style lang="scss" scoped>
:deep(.u-popup.type-class .u-transition) {
	top: 88rpx !important;
    box-shadow: 1rpx 1rpx 6rpx 2rpx rgba(184,201,212,0.25);
}
.noData{
	height: calc(100vh - 206rpx - constant(safe-area-inset-bottom));
	height: calc(100vh - 206rpx - env(safe-area-inset-bottom));
 }
.jfmx-bg {
  background-image: url("../../../image/jfmx/top-bg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.bottom-sle::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  background-image: url("../../../image/jfmx/select-icon.png");
  width: 100%;
  height: 10rpx;
  transform: translateY(20rpx);
  background-repeat: no-repeat;
  background-position: 40% center;
  background-size: 20% 100%;
}
</style>
